<template>
	<view >
		<!-- 基础卡片 -->
		<view class="card m-10 p-10">
			<view class="leftbar mr-20">
				<view class="imgfa">
					<image src="../../static/Chart.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="rightbar">
				<view class="card__content">
					全运会10米气步枪混合团体展开决赛争夺，由杨倩/杨皓然组成的奥运联合一队，以17比13击败了浙江二队拿到金牌
				</view>
				<view class="card__bottom">
					<Tag title="哈哈哈"></Tag>
					<view class="">
						120浏览
					</view>
				</view>
			</view>
		</view>
		<!-- 大图卡片 -->
		<view class="card m-10 p-10 column">
			<view class="topbar mb-10">
				<view class="imgfa">
					<image src="../../static/banner1.jpg" mode="aspectFit"></image>
				</view>
			</view>
			<view class="midbar rightbar mb-10">
				<view class="card__content">
					9月13日，台风“灿都”逼近上海，不过，在某老字号饭店的门口，仍有不少市民撑着伞，在风雨中排队购买这里的老字号月饼
				</view>
			</view>
			<view class="card__bottom">
				<Tag title="呵呵"></Tag>
				<view class="">
					120浏览
				</view>
			</view>
		</view>
		<!-- 多图卡片 -->
		<view class="card m-10 p-10 muti">
			<view class="topbar mb-10">
				<view class="card__content">
					9月13日，台风“灿都”逼近上海，不过，在某老字号饭店的门口，仍有不少市民撑着伞，在风雨中排队购买这里的老字号月饼
				</view>
			</view>
			<view class="midbar mb-10">
				<view class="imgfa">
					<image src="../../static/banner1.jpg" mode="aspectFit"></image>
				</view>
				<view class="imgfa">
					<image src="../../static/banner2.jpg" mode="aspectFit"></image>
				</view>
				<view class="imgfa">
					<image src="../../static/banner3.jpg" mode="aspectFit"></image>
				</view>
			</view>
			<view class="card__bottom">
				<Tag title="呵呵"></Tag>
				<view class="">
					120浏览
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"List-Card",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.card{
		display: flex;
		box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
		border-radius: 10rpx;
		.leftbar{
			.imgfa{
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.rightbar{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.card__content{
				overflow:hidden;				
				text-overflow:ellipsis;				
				display:-webkit-box;				
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2;
				font-size: 28rpx;
			}
			.card__bottom{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
		&.column{
			display: flex;
			flex-direction: column;
			.topbar{
				width: 100%;
				height: 300rpx;
				.imgfa{
					width: 100%;
					height: 100%;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.card__bottom{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
		&.muti{
			display: flex;
			flex-direction: column;
			.topbar{
				.card__content{
					overflow:hidden;				
					text-overflow:ellipsis;				
					display:-webkit-box;				
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2;
					font-size: 28rpx;
				}
			}
			.midbar{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.imgfa{
					width: 210rpx;
					height: 120rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.card__bottom{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>
